<template>
  <van-cell :title="title" :required="required">
    <template #default>
      <div class="g-radios">
        <van-radio
          class="radio"
          :name="radio.value"
          v-model="currentValue"
          v-for="radio in radios"
          :key="radio.value"
          >{{ radio.label }}
        </van-radio>
      </div>
    </template>
  </van-cell>
</template>

<script>
export default {
  name: "g-radio",
  props: {
    title: {
      type: String
    },
    radios: {
      type: Array,
      required: true
    },
    value: [String, Boolean, Array],
    required: {
      type: Boolean,
      required: false
    }
  },
  watch: {
    value(_value) {
      this.currentValue = _value;
    },
    currentValue(_value) {
      this.$emit("input", _value);
    }
  },
  data() {
    return {
      currentValue: this.value
    };
  }
};
</script>

<style lang="less" scoped>
.g-radios {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  .radio {
    margin-left: 8px;
  }
}
</style>
